<template>
  <view class="settings">
	 
	  
	  
	  
    <van-cell-group>
		 <van-cell title="检测宝宝" is-link :value="chooseBabyName" @click="showChooseBaby=!showChooseBaby" />
		 <van-cell title="当前姿态" is-link :value="chooseBabyStatus"  />
      <van-cell title="提醒方式" is-link :value="`${msgType}`" @click="showSelect=!showSelect" />
    </van-cell-group>
   <van-radio-group v-model="checked" v-if="showSelect">
     <van-cell-group inset>
       <van-cell title="语音播报" clickable @click="settingVoice()">
         <template #right-icon>
           <van-radio name="1" />
         </template>
       </van-cell>
       <van-cell title="短信通知" clickable @click="settingSms()">
         <template #right-icon>
           <van-radio name="2" />
         </template>
       </van-cell>
	   <van-cell title="邮件通知" clickable @click="settingEmail()">
	     <template #right-icon>
	       <van-radio name="3" />
	     </template>
	   </van-cell>
     </van-cell-group>
   </van-radio-group>
   
   <van-cell-group>
     <van-cell title="绑定手机号" is-link :value="form.phone!==''?form.phone:'暂未绑定'" @click="showBindPhone=!showBindPhone" />
	  <van-cell title="绑定邮箱" is-link :value="form.email!==''?form.email:'暂未绑定'" @click="showBindEmail=!showBindEmail"/>
   </van-cell-group>
   
   
   
   <van-dialog v-model:show="showChooseBaby" title="选择检测宝宝" show-cancel-button >
	   <view class="checkedBaby">
	   	<van-radio-group v-model="checkedBaby" @change="changeFn">
			<view v-for="item in babys">
				<br> <van-radio  :name="item.id" @click="checkedBaby=item.id">{{item.name}}</van-radio>
			</view>
	   	 
		  <br>
	   	  
	   	</van-radio-group>
	   </view>
		
   	 
   	 </van-dialog>
   
   
   <van-dialog v-model:show="showBindPhone" title="绑定手机" show-cancel-button @confirm="bindPhone()">
     <van-form  @submit="bindPhone">
      <van-cell-group inset>
        <van-field
          v-model="form.phone"
          name="手机号"
          label="手机号"
          placeholder="填写手机号"
         :rules="phoneRules"
        />
       </van-cell-group>
       <div style="margin: 16px;">
       </div>
     </van-form>
	 
	 </van-dialog>
	 
	 
	 <van-dialog v-model:show="showBindEmail" title="绑定邮箱" show-cancel-button @confirm="bindEmail()">
	   <van-form  @submit="bindPhone">
	    <van-cell-group inset>
	      <van-field
	        v-model="form.email"
	        name="邮箱"
	        label="邮箱"
	        placeholder="填写邮箱"
	       :rules="emailRules"
	      />
	     </van-cell-group>
	     <div style="margin: 16px;">
	     </div>
	   </van-form>
	 
	 
   </van-dialog>
   
  </view>
</template>

<script lang="ts" setup>
import { NavBar, CellGroup, Cell, Button, Dialog , Tag,Radio,Toast,RadioGroup} from 'vant';
import { ref ,computed,onMounted ,onBeforeMount,onBeforeUpdate} from 'vue';
import {getChooseBabyNameStatusApi,setRemindApi,getMSGTypeApi,getBindPhoneApi,getBindEmailApi,bindPhoneApi,bindEmaliApi,getChooseBabyApi,getChooseBabyNameApi,setChooseBabyApi} from '../../apis/userApi.js'
import {getBabysApi} from '../../apis/babyApi.js'
import {speak} from '../../util/speak.js'

const checkedBaby=ref(2)
const changeFn=async()=>{
	const res=await setChooseBabyApi({'id':checkedBaby.value})
	if(res.code===0){
		Toast('设置成功！')
	}
	await getchooseBabyName()
	
	
}

const babys=ref([])
const chooseBabyName=ref('暂无')
const chooseBabyStatus=ref('未知')

//获取所有宝宝
const getBabyNames=async()=>{
	const res=await	getBabysApi()
	babys.value=res.data
	console.log(babys.value[0])
}
//获取选中宝宝
const getChooseBaby=async()=>{
	const res=await getChooseBabyApi()
	checkedBaby.value=res.choose_baby
}

//获取默认宝宝名称
const getchooseBabyName=async()=>{
	const res=await getChooseBabyNameApi()
	chooseBabyName.value=res.data.name
	
		
}
//获取当前检测宝宝状态
const getBabyStatus=async()=>{
	const res =await  getChooseBabyNameStatusApi()
	if(res.status!==chooseBabyStatus.value){
		uni.setStorageSync("statusChange",1)
	}
	chooseBabyStatus.value=res.status
}


const msgType=computed(()=>{
	if(checked.value==='1'){
		return '[语音播报]'
	}
	if(checked.value==='2'){
		return '[短信通知]'
	}
	if(checked.value==='3'){
		return '[邮件通知]'
	}
})
const goBack = () => {
  // 在这里实现返回逻辑，比如使用路由跳转或者返回上一页
};

//提醒方式
const checked=ref('1')
const showSelect=ref(false)



const form = ref({
  phone: '',
  email: ''
});

//选择检测宝宝弹窗
const showChooseBaby=ref(0)


//绑定手机弹窗
const showBindPhone=ref(0)
//绑定手机
const bindPhone=async()=>{
	const res=await bindPhoneApi({'phone':form.value.phone})
	if(res.code===0){
		Toast('绑定手机成功！');
	}
}
const phoneRules = [
  { required: true, message: '请输入手机号码' },
  {
    pattern: /^1[3456789]\d{9}$/,
    message: '请输入正确的手机号码'
  }
];

const emailRules = [
  { required: true, message: '请输入邮箱地址' },
  {
    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
    message: '请输入有效的邮箱地址'
  }
];


//绑定邮箱弹窗
const showBindEmail=ref(0)
const bindEmail=async()=>{
	const res=await bindEmaliApi({'email':form.value.email})
	if(res.code===0){
		Toast('绑定邮箱成功！');
	}
}

const settingVoice=async()=>{
	const res= await setRemindApi({'msg_type':1})
	checked.value='1'
	Toast('成功设置为语音播报！');
}
const settingSms=async()=>{
	const res= await setRemindApi({'msg_type':2})
	checked.value='2'
	Toast('成功设置为短信通知！');
}
const settingEmail=async()=>{
	const res= await setRemindApi({'msg_type':3})
	checked.value='3'
	Toast('成功设置为邮件通知！');
}

//

//获取设置项信息
const getMSGType=async()=>{
	const res=await getMSGTypeApi()
	checked.value=res.data.toString()
}

const getBindPhone=async()=>{
	const res=await getBindPhoneApi()
	form.value.phone=res.data
}

const getBindEmail=async()=>{
	const res=await getBindEmailApi()
	form.value.email=res.data
}

const refresh=async()=>{
	//获取宝宝
	getBabyNames()
	//获取选中宝宝
	 getChooseBaby()
	 //获取选中宝宝名称
	 getchooseBabyName()
	 //获取选中宝宝状态
	 getBabyStatus()
	//获取默认提醒放方式
	getMSGType()
	//获取绑定手机
	getBindPhone()
	//获取绑定邮箱
	getBindEmail()
}
onBeforeMount(()=>{
	refresh()
})

const statusChange=ref(false)
onMounted(()=>{
	uni.setStorageSync("statusChange",1)
	setInterval(async () => {
	  await getBabyStatus();
	  if(checked.value=='1'&&uni.getStorageSync("statusChange")){
		  speak('婴儿'+chooseBabyStatus.value)
		 uni.setStorageSync("statusChange",0)
	  }
	}, 2000);

})
</script>

<style scoped>
/* 这里可以添加样式 */
.settings {
  padding-top: 50px;
}

.logout-btn {
  margin: 20px;
}
.checkedBaby{
	width: 100%;
	
	display: flex;
	justify-content: center;
	margin: 40rpx 0rpx;
}
</style>

